<template>
	<view class="home-page">
		<!-- 贡和协会首页 -->
		<!-- 轮播图 -->
		<view class="home-swiper-box" v-if="storeAdvList.length>0">
			<view class="home-swiper">
				<u-swiper :list="storeAdvList" img-mode="scaleToFill" height="300"  border-radius="16"></u-swiper>
			</view>
		</view>
		<!-- 导航 -->
		<view class="home-nav-box">
			<view class="home-top-img">
				<view class="home-top-list">
					<image mode="widthFix" src="//m.360buyimg.com/mobilecms/s120x120_jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg.dpg"></image>
					<text class="home-nav-text">美食餐厅</text>
				</view>
			</view>
			<view class="home-top-img">
				<view class="home-top-list">
					<image mode="widthFix" src="//m.360buyimg.com/mobilecms/s120x120_jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg.dpg"></image>
					<text class="home-nav-text">美食餐厅</text>
				</view>
			</view>
			<view class="home-top-img">
				<view class="home-top-list">
					<image mode="widthFix" src="//m.360buyimg.com/mobilecms/s120x120_jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg.dpg"></image>
					<text class="home-nav-text">美食餐厅</text>
				</view>
			</view>
			<view class="home-top-img">
				<view class="home-top-list">
					<image mode="widthFix" src="//m.360buyimg.com/mobilecms/s120x120_jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg.dpg"></image>
					<text class="home-nav-text">美食餐厅</text>
				</view>
			</view>
			<view class="home-top-img">
				<view class="home-top-list">
					<image mode="widthFix" src="//m.360buyimg.com/mobilecms/s120x120_jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg.dpg"></image>
					<text class="home-nav-text">美食餐厅</text>
				</view>
			</view>
		</view>
		<!-- 活动回顾 -->
		<view class="home-content-header">
			<view class="title">活动回顾</view>
			<view class="more">更多></view>
		</view>
		<!-- 活动 -->
		<view class="home-contert-body">
			<view class="home-contert-list">
				<view class="home-contert-left">
					<image src="/static/picture/log.png"></image>
				</view>
				<view class="home-contert-right">
					<view class="title">浙江省书法家协会陆维钊研究委员会主题书法篆刻作品展</view>
					<view class="describe">
						<text class="heat">热</text>
						<text class="institution">贡和堂</text>
						<text class="time">04-01 16:09</text>
					</view>
				</view>
			</view>
			<view class="home-contert-list">
				<view class="home-contert-left">
					<image src="/static/picture/log.png"></image>
				</view>
				<view class="home-contert-right">
					<view class="title">古镇西塘.第七届长三角“顾锡东戏剧艺术”越剧票友大赛决赛即将在西</view>
					<view class="describe">
						<text class="heat">热</text>
						<text class="institution">贡和堂</text>
						<text class="time">04-01 16:09</text>
					</view>
				</view>
			</view>
			<view class="home-contert-list">
				<view class="home-contert-left">
					<image src="/static/picture/log.png"></image>
				</view>
				<view class="home-contert-right">
					<view class="title">浙江省书法家协会陆维钊研究委员会主题书法篆刻作品展</view>
					<view class="describe">
						<text class="heat">热</text>
						<text class="institution">贡和堂</text>
						<text class="time">04-01 16:09</text>
					</view>
				</view>
			</view>
			<view class="home-contert-list">
				<view class="home-contert-left">
					<image src="/static/picture/log.png"></image>
				</view>
				<view class="home-contert-right">
					<view class="title">古镇西塘.第七届长三角“顾锡东戏剧艺术”越剧票友大赛决赛即将在西</view>
					<view class="describe">
						<text class="heat">热</text>
						<text class="institution">贡和堂</text>
						<text class="time">04-01 16:09</text>
					</view>
				</view>
			</view>
			<view class="home-contert-list">
				<view class="home-contert-left">
					<image src="/static/picture/log.png"></image>
				</view>
				<view class="home-contert-right">
					<view class="title">浙江省书法家协会陆维钊研究委员会主题书法篆刻作品展</view>
					<view class="describe">
						<text class="heat">热</text>
						<text class="institution">贡和堂</text>
						<text class="time">04-01 16:09</text>
					</view>
				</view>
			</view>
			<view class="home-contert-list">
				<view class="home-contert-left">
					<image src="/static/picture/log.png"></image>
				</view>
				<view class="home-contert-right">
					<view class="title">古镇西塘.第七届长三角“顾锡东戏剧艺术”越剧票友大赛决赛即将在西</view>
					<view class="describe">
						<text class="heat">热</text>
						<text class="institution">贡和堂</text>
						<text class="time">04-01 16:09</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				type: 'text',
				border: true,
				storeAdvList:[
					{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				]
			}
		},
		
	}
</script>

<style scoped>
	.home-page{
		width: 750rpx;
		padding:24rpx;
	}
	/* 轮播图 */
	
	/* 导航 */
	.home-nav-box{
		margin-top: 6rpx;
		display: flex;
	}
	.home-top-img {
		flex: 1;
		text-align: center;
	}
	.home-top-list{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
 .home-top-list image{
		width: 82rpx;
		height: 82rpx;
	}
	.home-top-list .home-nav-text{
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
	}
	/* 内容 */
	/* .home-content-box{
		margin-top: 49rpx;
	} */
	.home-content-header{
		display: flex;
		margin-top: 49rpx;
  	justify-content: space-between;
	}
	.home-content-header .title{
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}
	.home-content-header .more{
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
	}
	.home-contert-body {
		margin-top: 26rpx;
	}
	.home-contert-list{
		display: flex;
		margin-top: 30rpx;
	}
	.home-contert-body .home-contert-left{
		display: 1;
		border-radius: 8rpx;
	}
	.home-contert-body .home-contert-left image{
		width: 226rpx;
		height: 154rpx;
	}
	.home-contert-body .home-contert-right{
		margin-left: 20rpx;
	}
	.home-contert-right .title{
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 45rpx;
		/* 超出两行部分省略号显示 */
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.home-contert-right .describe{
		display: flex;
		align-items: center;
		padding-top: 35rpx;
	}
	.home-contert-right .describe .heat{
		width: 34rpx;
		height: 28rpx;
		border: 1rpx solid #C30D23;
		border-radius: 4rpx;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #C30D23;
		line-height: 28rpx;
		text-align: center;
	}
	.home-contert-right .describe .institution{
		margin: 0 20rpx 0 11rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #999999;
	}
	.home-contert-right .describe .time{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #999999;
	}
</style>
